<template>
    <div>
        <headbar title="景点详情" :left="true" classleft="el-icon-back" @handleleft="toback"></headbar> <!-- 顶部 -->

        <div class="mar">
            <!-- 展示主图片 -->
            <div class="img" :style="{'backgroundImage':'url('+scenery.picture[0]+')'}"></div>

            <!-- 文字区域 景点名和景点简介 -->
            <div class="title">{{ scenery.name }}</div>
            <div :class="isunfold?'story':'unstory'">简介：{{ scenery.story }}</div>
            <div style="width: 100%; text-align: center;" @click="isunfold=!isunfold">
                <i :class="isunfold?'el-icon-arrow-up':'el-icon-arrow-down'" style="color: rgb(74, 152, 126);"></i>
            </div>

            <div>
                <!-- 景点地址 -->
                <map-container :size="true" :lnglat="scenery.lnglat"></map-container>
                {{ scenery.location }}
            </div>

            <div class="preview">
                <!-- 景点图片 -->
                <div v-for="(item,index) in scenery.picture" 
                :key="index" 
                :style="{'backgroundImage':'url('+item+')'}"
                class="previewimg"
                @click="handle(index)"></div>
            </div>

            <div>
                <!-- 评论区域 -->
                <div class="artword"><span class="iconfontbig icon-a-pinglunxinxi"></span><span>评论区</span></div>

                <div>
                    <div v-for="(item,index) in scenery.comments" :key="index" @click="at(item.username)">
                        <div>
                            <span class="name">{{ item.username }}</span>
                            <span v-if="item.to!= ''" style="color:rgb(255, 81, 0); font-size: 0.20rem;">  回复  {{ item.to }}</span>
                        </div>

                        <div class="content">{{ item.centent }}</div>
                    </div>
                </div>
            </div>

            <div class="pl">
                <input type="input" class="input" placeholder="写下你的感悟吧" ref="comment" v-model="text">
                <button class="botton" @click="publish()">发表</button>
            </div>

        </div>
    </div>
</template>

<script>
import headbar from '@/components/headbar.vue'
import comments from '@/components/comments.vue'
import { ImagePreview } from 'vant';
import MapContainer from '@/components/MapContainer.vue'
import axios from 'axios';
export default {
    components:{
        headbar,
        comments,
        MapContainer
    },
    data(){
        return{
            scenery: {},
            isunfold: false,
            inputtext: '',
            text:''
        }
    },
    created(){
        this.scenery = this.$store.state.moreobj
        console.log(this.scenery)
    },
    methods:{
        handle(item){
            ImagePreview({
                images: [...this.scenery.picture],
                startPosition: item,
                closeable: true,
                closeIconPosition:'top-left'
            })
        },
        toback(){
            this.$router.back()
        },
        publish(){
            if(this.text.length>0){
                if(window.sessionStorage.getItem('token')){
                    let newcomment = {
                        numbering: this.scenery.comments.length + 1,
                        username: this.$store.state.userobj.name,
                        userid: this.$store.state.userobj.id,
                        centent: this.text,
                        to: this.to
                    }
                    console.log(newcomment)
                    this.scenery.comments.push(newcomment)
                    console.log(this.worldobj)
                    axios.put(`http://localhost:3000/attractions?pinying=${this.scenery.pinying}`,this.scenery.comments).then(res=>{
                        console.log(res.data)
                    })
                }else{
                    this.$router.push('/my')
                }
           }else{
            alert('不能发表空评论')
           }
        },
        at(name){
            this.$refs.comment.placeholder = '@'+name
            this.to = name
        }
    }
}
</script>
<style lang="scss" scoped>
.mar{
    margin-bottom:0.9rem;
}
.img{
    width: 100%;
    height: 2rem;
    background-size: cover;
    background-position: center center;
}
.title{
    font-size: 30px;
    color: rgb(87, 87, 87);
}
.unstory{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgb(124, 127, 126);
}
.story{
    width: 100%;
    color: rgb(124, 127, 126);
}
.preview{
    overflow: scroll;
    width: 100%;
    height: 0.64rem;
    display: flex;
}
.previewimg{
    width: 1.15rem;
    height: 0.64rem;
    background-size: cover;
    background-position: center center;
    flex-shrink: 0;
    margin: 0 5px;
}
.white{
    position: fixed;
    bottom: 0.54rem;
    height: 0.35rem;
    border-top: 1px solid rgb(74, 152, 126);
}
.input{
    width: 3.15rem;
    height: 0.3rem;
    padding: 1px 2px;
    font-size: 12px;
    border: 1px solid rgb(74, 152, 126);
    border-radius: 2px;
}
.botton{
    width: 0.5rem;
    height: 0.3rem;
    font-size: 12px;
    padding: 1px 2px;
    border: 1px solid rgb(74, 152, 126);
    border-radius: 2px;
    background-color: rgb(239, 239, 239);
}
.artword{
    font-family: '楷体';
    font-size: 0.35rem;
    padding-bottom: 10px;
    color: rgb(74, 152, 126);
}
.name{
    font-size: 0.20rem;
    color: rgb(74, 152, 126);
}
.content{
    font-family: '楷体';
}
.pl{
    margin-top: 10px;
    margin-bottom: 0.6rem;
}
.input{
    width: 2.99rem;
    height: 0.31rem;
    padding: 1px 2px;
    font-size: 12px;
    border: 1px solid rgb(74, 152, 126);
    border-radius: 2px;
}
.botton{
    width: 0.5rem;
    height: 0.35rem;
    font-size: 12px;
    padding: 1px 2px;
    border: 1px solid rgb(74, 152, 126);
    border-radius: 2px;
    background-color: rgb(239, 239, 239);
}
</style>